<template>
    <div class="my-table-list">
        <div class="list-header" @change="toggleCheckedAll()">
            <div class="row row0 flex-lm clr3">
                <div class="col col1">
                    <input id="row0-check-box" :checked="isChecked" type="checkbox">
                    <label for="row0-check-box">全选</label>
                </div>
                <div class="col col2" />
                <div class="col col3">
                    商品名称
                </div>
                <div class="col col4">
                    单价
                </div>
                <div class="col col5">
                    数量
                </div>
                <div class="col col6">
                    小计
                </div>
                <div class="col col7">
                    操作
                </div>
            </div>
        </div>
        <div class="list-body" @change="subChange()">
            <div v-for="(item, idx) in dataArr" class="row flex-lm fz18 clr3" :class="'row' + (idx + 1)">
                <div class="col col1">
                    <input :id="'row'+(idx+1)+'-check-box'" v-model="checklist" type="checkbox" :value="item">
                    <label :for="'row'+(idx+1)+'-check-box'" />
                </div>
                <div class="col col2">
                    <img :src="item.color.img" alt="" class="w80 h80">
                </div>
                <div class="col col3">
                    {{item.edition.desc}} {{item.edition.title}}
                </div>
                <div class="col col4">
                    {{item.edition.price}}元
                </div>
                <div class="col col5">
                    <ar-button @click-minus="onClickMinus(idx)" @click-plus="onClickPlus(idx)">
                        {{item.count}}
                    </ar-button>
                </div>
                <div class="col col6 clr1">
                    {{item.edition.price}}元
                </div>
                <div class="col col7" @click="remove(idx)">
                    <i class="fa fa-times" aria-hidden="true"></i>
                </div>
            </div>
        </div>
        <div class="bgc8 h20"></div>
        <div class="list-footer h50 clr5 fz14 flex-bm">
            <div>
                <span class="ml32">继续购物</span>
                <span class="ml16">|</span>
                <span class="ml16">共 <span class="clr1">{{this.dataArr.length}}</span> 件商品，已选择 <span class="clr1">{{this.checklist.length}}</span> 件</span>
            </div>
            <div class="clr1 flex-lm h100p">
                <span>合计：</span>
                <span class="fz30 alis-b">{{amount}}</span>
                <span>元</span>
                <a href="" @click.prevent="onClickEnd" class="ml50 h100p lh50 w200" :class="test">去结算</a>
            </div>
        </div>
    </div>
</template>

<script>
import { myTools } from 'assets/MyTools/Tools'
import arButton from './add-reduce-button'

export default {
    components: {
        arButton
    },
    props: {
        dataArr: {
            type: Array,
            default: function () {
                return []
            }
        }
    },
    data: function () {
        return {
            checklist: [],
            isChecked: true,
            test: 'btn1'
        }
    },
    computed: {
        amount: function () {
            let val
            let total = 0
            const arr = this.dataArr
            for (let i = 0; i < arr.length; i++) {
                const isExisted = this.checklist.some(function (item) {
                    return item === arr[i]
                })
                if (isExisted) {
                    val = arr[i].count * arr[i].edition.price
                    total += val
                }
            }
            return total
        }
    },
    created() { // 数据
        this.checklist = this.dataArr
    },
    methods: {
        toggleCheckedAll: function () {
            this.checklist = this.checklist.length === this.dataArr.length ? [] : this.dataArr
            this.isChecked = this.checklist.length === this.dataArr.length
        },
        subChange: function () {
            this.isChecked = this.checklist.length === this.dataArr.length
            this.test = this.checklist.length ? 'btn1' : 'btn2'
        },
        onClickMinus: function (idx) {
            if (this.dataArr[idx].count === 1) {
                return false
            } else {
                this.dataArr[idx].count -= 1
                myTools.saveSession('cart', this.dataArr)
            }
        },
        onClickPlus: function (idx) {
            this.dataArr[idx].count += 1
            myTools.saveSession('cart', this.dataArr)
        },
        remove: function (idx) {
            this.dataArr.splice(idx, 1)
            myTools.saveSession('cart', this.dataArr)
        },
		onClickEnd: function () {
			window.alert('结算成功')
		}
    }
}
</script>

<style lang="stylus">
.my-table-list
    .row { padding: 15px 26px 15px 0; border-top: 1px solid #e0e0e0}
    .row0 { height: 70px; padding: 0; border-top: none }
    .col { text-align: center }
    .col1 { width: 110px; text-align: left }
    .col2 { width: 120px; text-align: left }
    .col3 { width: 380px; text-align: left }
    .col4 { width: 160px }
    .col5 { width: 150px }
    .col6 { width: 200px }
    .col7 { width: 80px }
    .fa.fa-times:hover {
        display: inline-block
        width: 20px
        height: 20px
        border-radius: 50%
        background-color: #e04646
        color: #fff
        vartical-align: middle
        transition background-color .3s
        cursor pointer
    }
    input[type="checkbox"] + label::before {
        content: "\a0";  /*不换行空格，设空值时，点击勾选会有抖动*/
        display: inline-block;
        width: 18px;
        height: 18px;
        cursor: pointer;
        border: 1px solid #e0e0e0;
        margin-right: 15px;
        font-size: 14px;
    }
    input[type="checkbox"]:hover + label::before {
        content: "\2714";
        font-size: 14px;
        text-align: center;
        color: #757575;
    }
    input[type="checkbox"]:checked + label::before {
        content: "\2714";
        background-color: #ff6700;
        color: #fff;
        text-align: center;
        border: 1px solid #ff6700
        margin-right: 15px;
        font-size: 14px;
    }
    input[type=checkbox]{
        visibility: hidden;
    }
</style>
